import React, { memo } from 'react'
import Top from './Top';
import { useEffect, useState } from 'react';
import axios from 'axios'
import Body from './Body';
import Footer from './Footer';
function DivActicv(props) {
    let { type } = props
    let [coffee, setCoffee] = useState([])
    let [btnId, setBtnId] = useState(0)
    useEffect(() => {
        axios.get('http://localhost:3000/coffee').then(res => {
            setCoffee(res.data[type])
        })
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
    return (<div className='btns'>
        {
            coffee.map((item => <div key={item.id} onClick={() => setBtnId(item.id)} className={btnId === item.id ? 'active' : ""}>{item.name}</div>))
        }
    </div>)
}
const Ding = memo(() => {
    return (
        <div>
            <Top></Top>
            <Body></Body>
            <Footer></Footer>

            <div>
                <p>杯型：</p>
                <DivActicv type='beixing'></DivActicv>
                <p>温度：</p>
                <DivActicv type='wendu'></DivActicv>
                <p>糖度</p>
                <DivActicv type='tangdu'></DivActicv>
            </div>
        </div>
    )
})

export default Ding